<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--layui-->
    <link rel="stylesheet" th:href="@{../static/layui/css/layui.css}">

    <!---->
    <link rel="stylesheet" th:href="@{../static/fonts/font-awesome/font-awesome.css}">
    <link rel="stylesheet" th:href="@{../static/styles/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{../static/styles/main.min.css}">

    <!--layui修改样式-->
    <link rel="stylesheet" th:href="@{../static/styles/layui-alter.css}">

</head>
<body>
<!--头部导航栏-->
<header class="site-head clearfix ng-scope" id="site-head" th:fragment="site-head">

    <!--图标-->
    <div class="nav-head ng-scope" style="width: 203px;">
        <!-- Site logo -->
        <a href="/" class="site-logo"><span style="font-size: 22px;">千峰&nbsp;物流</span></a>
        <span class="nav-trigger fa fa-outdent" />
    </div>

    <!--头部导航栏-->
    <div class="head-wrap clearfix ng-scope">
        <ul class="list-unstyled navbar-right">

            <li>
                <a href=""><i class="fa fa-expand"></i></a>
            </li>

            <li class="dropdown" >
                <a href="" class="dropdown-toggle notification" dropdown-toggle="" aria-haspopup="true"
                   aria-expanded="false">
                    <i class="fa fa-bell-o"></i>
                    <span class="badge badge-danger badge-xs circle">3</span>
                </a>
                <div class="panel panel-default dropdown-menu">
                    <div class="panel-heading">
                        <p class="panel-title">You have <strong>3</strong> new notifications</p>
                    </div>
                    <ul class="list-unstyled noti-drop clearfix ps-container" custom-scrollbar="">
                        <li>
                            <a href="" class="clearfix">
                                <i class="fa fa-bolt icon left bg-primary"></i>
                                <div class="info left">
                                    <strong>New app uploaded</strong>
                                    <span class="small time">few secs ago</span>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="" class="clearfix">
                                <i class="fa fa-info icon left bg-info"></i>
                                <div class="info left">
                                    <strong>Samuel left a message</strong>
                                    <span class="small time">3 min ago</span>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="" class="clearfix">
                                <i class="fa fa-calendar-o icon left"></i>
                                <div class="info left">
                                    <strong>Meetup at 3:00 P.M</strong>
                                    <span class="small time">2 hours ago</span>
                                </div>
                            </a>
                        </li>
                        <div class="ps-scrollbar-x-rail" style="left: 0px; bottom: 3px;">
                            <div class="ps-scrollbar-x" style="left: 0px; width: 0px;"></div>
                        </div>
                        <div class="ps-scrollbar-y-rail" style="top: 0px; right: 0px;">
                            <div class="ps-scrollbar-y" style="top: 0px; height: 0px;"></div>
                        </div>
                    </ul>
                    <div class="panel-footer">
                        <p class="read-all mb0 small"><a href="#na">View all notifications</a>
                            <i class="fa fa-circle-o-notch right" title="mark all read"></i>
                        </p>
                    </div>
                </div>
            </li>

            <li>
                <a href="">
                    <i class="fa fa-tasks"></i>
                </a>
                <div class="floating-sidebar">
                    <!-- tasks -->
                    <div class="ongoing-tasks">
                        <h3 class="small title mb30">Ongoing Tasks</h3>
                        <ul class="list-unstyled mb15 clearfix">
                            <li>
                                <div class="clearfix mb10">
                                    <small class="left">App Upload</small>
                                    <small class="right">80%</small>
                                </div>
                                <div class="progress-xxs progress ng-isolate-scope" value="80" type="success">
                                    <div class="progress-bar progress-bar-success"
                                         ng-class="type &amp;&amp; 'progress-bar-' + type" role="progressbar"
                                         aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"
                                         ng-style="{width: percent + '%'}" aria-valuetext="80%" ng-transclude=""
                                         style="width: 80%;"></div>
                                </div>
                            </li>
                            <li>
                                <div class="clearfix mb10">
                                    <small class="left">Creating Assets</small>
                                    <small class="right">50%</small>
                                </div>
                                <div class="progress-xxs progress ng-isolate-scope" value="50" type="danger">
                                    <div class="progress-bar progress-bar-danger"
                                         ng-class="type &amp;&amp; 'progress-bar-' + type" role="progressbar"
                                         aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"
                                         ng-style="{width: percent + '%'}" aria-valuetext="50%" ng-transclude=""
                                         style="width: 50%;"></div>
                                </div>
                            </li>
                            <li>
                                <div class="clearfix mb10">
                                    <small class="left">New UI 2.0</small>
                                    <small class="right">90%</small>
                                </div>
                                <div class="progress-xxs progress ng-isolate-scope" value="90" type="warning">
                                    <div class="progress-bar progress-bar-warning"
                                         ng-class="type &amp;&amp; 'progress-bar-' + type" role="progressbar"
                                         aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"
                                         ng-style="{width: percent + '%'}" aria-valuetext="90%" ng-transclude=""
                                         style="width: 90%;"></div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <!-- #end tasks -->

                    <!-- transaction -->
                    <div class="stats">
                        <h3 class="small title mb15">Transaction</h3>
                        <ul class="list-unstyled clearfix mb15">
                            <li class="clearfix">
                                <i class="fa fa-paypal left bg-primary"></i>
                                <div class="info">
                                    <strong>Send to Elli at 4:00 pm</strong>
                                    <span>$3000</span>
                                </div>
                            </li>
                            <li class="clearfix">
                                <i class="fa fa-bitcoin left bg-warning"></i>
                                <div class="info">
                                    <strong>Received from Salman at 12:00 pm</strong>
                                    <span>B 35000</span>
                                </div>
                            </li>
                            <li class="clearfix">
                                <i class="fa fa-gittip left bg-info"></i>
                                <div class="info">
                                    <strong>Donate to gittip</strong>
                                    <span>$500</span>
                                </div>
                            </li>

                        </ul>
                    </div>
                    <!-- #end transaction -->
                </div>
            </li>

            <li class="dropdown" >
                <a href="" class="user-profile dropdown-toggle" dropdown-toggle="" aria-haspopup="true"
                   aria-expanded="false">
                    <img src="../static/images/admin.jpg" alt="admin-pic">
                </a>
                <!-- Profile drop -->
                <div class="panel panel-default dropdown-menu">
                    <div class="panel-body">
                        <figure class="photo left">
                            <img src="../static/images/admin.jpg" alt="admin-pic">
                            <a href="j:;">Photo</a>
                        </figure>
                        <div class="profile-info right">
                            <p class="user-name">Bryan R.</p>
                            <p>bryan.r@gmail.com</p>
                            <a href="j:;" class="btn btn-info btn-xs">See Profile</a>
                        </div>
                    </div>
                    <div class="panel-footer clearfix">
                        <a href="j:;" class="btn btn-default btn-sm left">Account</a>
                        <a href="#/pages/lock-screen" class="btn btn-info btn-sm right">Sign Out</a>
                    </div>
                </div>
            </li>

        </ul>
    </div>

</header>

</body>
</html>